<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>社区详情</title>
  <link href="../static/css/style.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <link href="../static/css/me.css" rel="stylesheet">
</head>

<body>
<nav th:replace="_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini">
  <div class="ui container"> <!-- 加一个容器 -->
    <div class="ui inverted secondary stackable menu"> <!-- 菜单 stackable:可堆叠的,表示屏幕小时自动堆叠-->
      <h2 class="ui white header item">GuideSystem</h2> <!-- 蓝绿色标题 -->
      <a href="#" th:href="@{/index}" class="m-item m-mobile-hide item" th:classappend="${n==1} ? 'active' "><i
          class="home icon"></i>首页</a> <!-- icon表示图表 -->
      <a href="#" th:href="@{/comment}" class="m-item m-mobile-hide item" th:classappend="${n==2} ? 'active' "><i
          class="comments icon"></i>论坛</a>
      <a href="#" th:href="@{/types/-1}" class="m-item m-mobile-hide item" th:classappend="${n==3} ? 'active' "><i
          class="idea icon"></i>分类</a>
      <a href="#" th:href="@{/about}" class="m-item m-mobile-hide item" th:classappend="${n==4} ? 'active' "><i
          class="info icon"></i>我的</a>
      <div class="right item m-item"> <!-- 靠右 -->
        <div class="ui icon input">
          <input type="text" placeholder="Search...">
          <i class="search link icon"></i>
        </div>
      </div>
      <div style="margin-top: 1.25em">
        <a href="#" th:href="@{/login}" style="font-size: 16px; color: #1ab7ea">
          <p class="m-inline-block">登录</p>
        </a>&nbsp;
        <a href="#" th:href="@{/register}" style="font-size: 16px; color: #1ab7ea">
          <p class="m-inline-block">注册</p>
        </a>
      </div>
    </div>
  </div>
</nav>

<div class="m-container-plus m-padded-tb-big" id="contentDiv">
  <div class="ui container">
    <div class="ui grid">
      <div class="eleven wide column">
        <div class="col-lg-12">
          <div class="card" th:each="blog : ${blogs}">
            <div class="card-header">
              <h4><a th:href="@{/blog/{id}(id=${blog.id})}"
                     href="#" class="m-black" target="_blank"
                     th:text="${blog.title}">考研法则十二套！</a></h4>
            </div>
            <div class="card-body">
              <div class="row">
                <p th:utext="${#strings.length(blog.description) > 140 ? blog.description.substring(0, 140) + '...' : blog.description}">
                  高考即将开始，马上也要迎来志愿填报的时刻，都说高考志愿填报是另一次高考，考得好不如选得好，关于高考志愿填报你有哪些困惑或者经验呢？
                  2022年6月2日-7月19日，发布高考志愿填报相关问题或回答，即有机会获得奖金和周边奖品。用过来人的经验为高考生答疑解惑，帮助高考生填报志愿。
                </p>
              </div>
              <hr>
              <div class="ui grid">
                <div class="eleven wide column">
                  <div class="ui mini horizontal link list">
                    <div class="item">
                      <img src="../static/images/IMG_6361.JPG"
                           th:src="@{${blog.user.avatar}}"
                           alt="" class="ui avatar image">
                      <div class="content">
                        <a href="#" th:href="@{/otherAbout/{id}(id = ${blog.user.id})}" class="header"
                           th:text="${blog.user.nickname}" target="_blank">韩宇帆</a>
                      </div>
                    </div>
                    <div class="item">
                      <i class="calendar time icon"></i> <span
                        th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2022-03-08</span>
                    </div>
                    <div class="item">
                      <i class="eye icon"></i><span th:text="${blog.views}">234</span>
                    </div>
                  </div>
                </div>
                <div class="right aligned five wide column">
                  <a href="#" th:href="@{/blog/{id}(id=${blog.id})}"
                     target="_blank" class="ui m-padded-mini m-text-thin">回复</a>
                  <a href="#" class="ui m-padded-mini m-text-thin" target="_blank">分享</a>
                </div>
              </div>
            </div>
          </div>
          <!--/*-->
          <div class="card">
            <div class="card-header"><h4>高考志愿填报讲解</h4></div>
            <div class="card-body">
              <div class="row">
                <p>高考即将开始，马上也要迎来志愿填报的时刻，都说高考志愿填报是另一次高考，考得好不如选得好，关于高考志愿填报你有哪些困惑或者经验呢？
                  2022年6月2日-7月19日，发布高考志愿填报相关问题或回答，即有机会获得奖金和周边奖品。用过来人的经验为高考生答疑解惑，帮助高考生填报志愿。
                </p>
              </div>
              <hr>
              <div class="ui grid">
                <div class="eleven wide column">
                  <div class="ui mini horizontal link list">
                    <div class="item">
                      <img src="../static/images/IMG_6361.JPG" th:src="@{/images/IMG_6361.JPG}"
                           alt=""
                           class="ui avatar image">
                      <div class="content">
                        <a href="#" th:href="@{/about}" class="header"
                           th:text="${blog.user.nickname}">韩宇帆</a>
                      </div>
                    </div>
                    <div class="item">
                      <i class="calendar time icon"></i> <span
                        th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2022-03-08</span>
                    </div>
                    <div class="item">
                      <i class="eye icon"></i><span th:text="${blog.views}">234</span>
                    </div>
                  </div>
                </div>
                <div class="right aligned five wide column">
                  <a href="#" class="ui m-padded-mini m-text-thin"
                     th:text="${blog.type.name}">回复</a>
                  <a href="#" class="ui m-padded-mini m-text-thin"
                     th:text="${blog.type.name}">分享</a>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h4>高考志愿填报讲解</h4></div>
            <div class="card-body">
              <div class="row">
                <p>高考即将开始，马上也要迎来志愿填报的时刻，都说高考志愿填报是另一次高考，考得好不如选得好，关于高考志愿填报你有哪些困惑或者经验呢？
                  2022年6月2日-7月19日，发布高考志愿填报相关问题或回答，即有机会获得奖金和周边奖品。用过来人的经验为高考生答疑解惑，帮助高考生填报志愿。
                </p>
              </div>
              <hr>
              <div class="ui grid">
                <div class="eleven wide column">
                  <div class="ui mini horizontal link list">
                    <div class="item">
                      <img src="../static/images/IMG_6361.JPG" th:src="@{/images/IMG_6361.JPG}"
                           alt=""
                           class="ui avatar image">
                      <div class="content">
                        <a href="#" th:href="@{/about}" class="header"
                           th:text="${blog.user.nickname}">韩宇帆</a>
                      </div>
                    </div>
                    <div class="item">
                      <i class="calendar time icon"></i> <span
                        th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2022-03-08</span>
                    </div>
                    <div class="item">
                      <i class="eye icon"></i><span th:text="${blog.views}">234</span>
                    </div>
                  </div>
                </div>
                <div class="right aligned five wide column">
                  <a href="#" class="ui m-padded-mini m-text-thin"
                     th:text="${blog.type.name}">回复</a>
                  <a href="#" class="ui m-padded-mini m-text-thin"
                     th:text="${blog.type.name}">分享</a>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h4>高考志愿填报讲解</h4></div>
            <div class="card-body">
              <div class="row">
                <p>高考即将开始，马上也要迎来志愿填报的时刻，都说高考志愿填报是另一次高考，考得好不如选得好，关于高考志愿填报你有哪些困惑或者经验呢？
                  2022年6月2日-7月19日，发布高考志愿填报相关问题或回答，即有机会获得奖金和周边奖品。用过来人的经验为高考生答疑解惑，帮助高考生填报志愿。
                </p>
              </div>
              <hr>
              <div class="ui grid">
                <div class="eleven wide column">
                  <div class="ui mini horizontal link list">
                    <div class="item">
                      <img src="../static/images/IMG_6361.JPG" th:src="@{/images/IMG_6361.JPG}"
                           alt=""
                           class="ui avatar image">
                      <div class="content">
                        <a href="#" th:href="@{/about}" class="header"
                           th:text="${blog.user.nickname}">韩宇帆</a>
                      </div>
                    </div>
                    <div class="item">
                      <i class="calendar time icon"></i> <span
                        th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2022-03-08</span>
                    </div>
                    <div class="item">
                      <i class="eye icon"></i><span th:text="${blog.views}">234</span>
                    </div>
                  </div>
                </div>
                <div class="right aligned five wide column">
                  <a href="#" class="ui m-padded-mini m-text-thin"
                     th:text="${blog.type.name}">回复</a>
                  <a href="#" class="ui m-padded-mini m-text-thin"
                     th:text="${blog.type.name}">分享</a>
                </div>
              </div>
            </div>
          </div>
          <!--*/-->
        </div>
      </div>
      <div class="five wide column">
        <div class="ui top attached segment">
          <div class="ui header" th:text="${forum.forumName}">论坛名称</div>
        </div>
        <div class="ui attached segment">
          <p class="m-text" th:text="${forum.description}">
            我要努力学习，为了娶到漂亮的小熊。我要努力学习，为了娶到漂亮的小熊。我要努力学习，为了娶到漂亮的小熊。我要努力学习，为了娶到漂亮的小熊。</p>
        </div>
        <div class="ui attached segment">
          <a th:each="tag : ${tags}" th:href="@{/forum/fblog/{forumId}/{tagId}(forumId=${forum?.id}, tagId=${tag?.id})}"
             class="ui orange basic left pointing label m-margin-tb-tiny" target="_blank"
             th:text="${tag.name}">编程
          </a>
          <!--/*-->
          <a class="ui orange basic left pointing label m-margin-tb-tiny">写作</a>
          <a class="ui orange basic left pointing label m-margin-tb-tiny">答疑</a>
          <a class="ui orange basic left pointing label m-margin-tb-tiny">冥想</a>
          <a class="ui orange basic left pointing label m-margin-tb-tiny">升学</a>
          <!--*/-->
        </div>
        <!--热度前八-->
        <div class="ui container segment">
          <h3>
            热度前八
          </h3>
          <div class="ui relaxed list">
            <a class="item" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" th:each="blog : ${hotBlogs}">
              <i class="right triangle icon"></i>
              <div class="content">
                <div class="header" style="font-weight: normal; font-size: 14px" th:text="${blog.title}">图标对齐方式
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="ui attached segment" style="border-top-right-radius: 0.4rem; border-top-left-radius: 0.4rem;">
          <img src="../static/images/WeChat1.jpg" th:src="@{/images/WeChat1.jpg}"
               style="width: 85%; margin-left: 1.5em">
          <p class="m-text" style="text-align: center">欢迎加入社区群聊 6 号群</p>
        </div>
        <div class="ui bottom attached segment">
          社区热度：<p class="m-text m-inline-block" th:text="${forum.popular}">1600</p><br>
          社区人数：<p class="m-text m-inline-block" th:text="${forum.peopleNumber}">1600</p><br>
          社区贴数：<p class="m-text m-inline-block" th:text="${forum.blogNumber}">800</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="m-padded m-right-bottom m-fixed">
  <div class="ui vertical icon buttons">
    <a onclick="requestLogin(this)" type="button" class="ui blue button">反馈</a>
    <a onclick="requestLogin(this)" class="ui blue button">写贴</a>
    <button class="ui icon button"><i class="headphones icon"></i></button>
    <a id="toTop-button" class="ui button"><i class="chevron up icon"></i></a>
  </div>
</div>

<div th:replace="_fragments :: noLogin"></div>

<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  <!-- vertical:垂直的 segment:条横 inverted:倒置的 -->
  <div class="ui center aligned container"> <!-- center aligned:居中 aligned:使成为一条线-->
    <div class="ui inverted divided stackable grid"> <!-- inverted divided grid:格线分成16份 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">消费者权益</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin">消费者热线：3838438</span>
          <span class="item m-text-thin">外卖热线：5201314</span>
          <span class="item m-text-thin">已获得食品安全局认证</span>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">商家加盟</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">食品外卖开店申请</a>
          <a href="#" class="item m-text-thin">美食商家入驻(非外卖)</a>
          <a href="#" class="item m-text-thin">合作/招聘</a>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">联系我</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin" style="height: 28px">邮箱: 1923326384@qq.com</span>
          <span class="item m-text-thin">QQ: 1923326384</span>
        </div>
      </div>

      <!-- 分成七列 -->
      <div class="seven wide column">
        <h4 class="ui inverted header m-text-thin">企业文化</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini m-text-lined">
          消费者第一，商家第二 | 诚信诚实正直，言出必践言行一致 | 以“吃”为核心，建设生活服务业从需求侧到供给侧的多层次科技服务平台。
        </p>
      </div>

    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2022-05-29 HanYuFan Designed by HanYuFan</p>
  </div>
</footer>

<th:block th:replace="_fragments :: script">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script type="text/javascript" src="../static/js/app.js"></script>
  <script type="text/javascript" src="../static/js/main.min.js"></script>
</th:block>

</body>
</html>
